<template>
	<view class="all">
		<view class="border">
			请在光线充足的地方近距离拍摄一张完整标签的照片，里头带有CLG代码
			<br />
			<br />
			<br />
		</view>
		<view class="choose">
			<view class="item" @click="onphoto()">
				拍照
				<img class="item_img" src="/static/right.png" alt="" />
			</view>
		</view>
		<view class="resend" @click="show =true">
			我找不到标签
		</view>
		<view :class="show===true?'show':'unshow'" @click="show=false">
			<view class="show_all">
				<view class="toast">
					<view class="pic">
						<img class="pic_img" src="/static/img.png" alt="" />
						<svg color="#fff" width="30px" height="30px" viewBox="0 0 45 45" class="sc-kWtpeL liUqCn">

							<g fill="none" fill-rule="evenodd">
								<g transform="rotate(20 6.02 34.143)">
									<path
										d="M32.617 7.756h2.356V1.758C34.945.756 34.233.055 33.236.055h-5.97V2.41h5.346v5.346h.005zM2.355 27.326H0V33.324c.027 1.002.74 1.698 1.73 1.698h5.971v-2.355H2.355v-5.34zM32.617 32.672h-5.345v2.355h5.97c.991 0 1.703-.7 1.73-1.703v-5.998h-2.355v5.346zM0 1.753V7.75h2.355V2.41h5.346V.055h-5.97C.739.055.027.755 0 1.753"
										fill="currentColor"></path>
								</g>
							</g>
						</svg>



					</view>
					<view class="toastfont">
						这个步骤是必不可少的，请拍摄所需的照片以获得回复。所谓的"标签"带有"CLG + 12 个数字"以及在产品上找到的二维码。
					</view>
				</view>
				<view class="know">
					好的，我知道了
					<img class="item_img" src="/static/right2.png" alt="" />
				</view>
				<view class="continue resend" @click="toEnd">
					我找不到标签
				</view>
			</view>
		</view>
		<view :class="show2===true?'show':'unshow'" @click="show2=false">
			<view class="show_all" style="display: flex;flex-direction: row;padding-bottom: 30px;">
				<view class="toast">
					<view class="pic">
						<img class="pic_img" src="/static/img.png" alt="" />
						<svg color="#fff" width="30px" height="30px" viewBox="0 0 45 45" class="sc-kWtpeL liUqCn">

							<g fill="none" fill-rule="evenodd">
								<g transform="rotate(20 6.02 34.143)">
									<path
										d="M32.617 7.756h2.356V1.758C34.945.756 34.233.055 33.236.055h-5.97V2.41h5.346v5.346h.005zM2.355 27.326H0V33.324c.027 1.002.74 1.698 1.73 1.698h5.971v-2.355H2.355v-5.34zM32.617 32.672h-5.345v2.355h5.97c.991 0 1.703-.7 1.73-1.703v-5.998h-2.355v5.346zM0 1.753V7.75h2.355V2.41h5.346V.055h-5.97C.739.055.027.755 0 1.753"
										fill="currentColor"></path>
								</g>
							</g>
						</svg>



					</view>
					<view class="toastfont" style="width: 75vw;padding-left: 10px;margin-top: 10px;">
						只差一步即可完成
					</view>
				</view>

			</view>
		</view>
		<overall :back="true" color="#fff" :backgroupcolor='true' :main_logo="true" @login="login"></overall>
	</view>
</template>

<script>
	import overall from '../overall.vue'
	export default {
		components: {
			overall
		},
		data() {
			return {
				show: false,
				show2: true
			}
		},
		onLoad() {
			setTimeout(() => {
				this.show2 = false
			}, 2000)
		},
		methods: {
			toEnd() {
				uni.navigateTo({
					url: '/pages/mail/finish?nopic=true'
				})
			},
			onphoto() {
				uni.navigateTo({
					url: '/pages/mail/camera'
				})
			}
		}
	}
</script>

<style>
	.all {
		display: flex;
		flex-direction: column;
		min-height: 90vh;
		padding: 15% 5% 5% 5%;
		align-items: center;
	}

	.border {
		margin-top: 40rpx;
		border-left: 6px #2c2c2c solid;
		padding-left: 40rpx;
		/* height: 12vh; */
		height: max-content;
		font-size: 19px;
		font-weight: bolder;
	}

	.choose {
		margin-top: 3vh;
		width: 100%;
	}

	.item {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 14.5px;
		font-weight: bolder;
		background: rgb(241, 241, 241);
		height: 6.4vh;
		margin-top: 10px;
	}

	.item_img {
		width: 19px;
		height: 19px;
		color: #000;
	}

	.resend {
		font-size: 13px;
		text-decoration: underline;
		font-weight: bolder;
		margin-top: 30px;
	}

	.unshow {
		display: none;
	}

	.show {
		display: flex;
		flex-direction: column;
		position: absolute;
		height: 100vh;
		width: 100vw;
		background-color: #4b4b4b80;
	}

	.show_all {
		background-color: #000;
		width: 84vw;
		margin: 30vh auto;
		padding: 5%;
		border-radius: 6px;
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.pic_img {
		width: 28px;
		height: 28px;
		position: absolute;
		transform: rotate(20deg) scale(.7) translate(19px, 8px);
	}

	.liUqCn {
		transform: scale(2) translate(5px, 5px);
	}

	.toastfont {
		color: #fff;
		width: 80%;
		font-size: 18px;
	}

	.toast {
		display: flex;
		flex-direction: row;
	}

	.pic {
		width: 20%;
	}

	.know {
		color: #fff;
		display: flex;
		align-items: center;
		margin-top: 40px;
		font-size: 13px;
	}

	.continue {
		color: #fff;
		margin-top: 40px;
		margin-bottom: 20px;
	}
</style>